<template>
  <div>
    <el-button @click="append">创建顶级兴趣</el-button>
    <el-button type="danger" @click="batchDelete">批量删除</el-button>
    <el-tree :data="dataList" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="interestId"
      :default-expanded-keys="expandedKey" ref="menuTree">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button v-if="node.level <= 1" type="text" size="mini" @click="append(data)">追加</el-button>
          <el-button type="text" size="mini" @click="edit(data)">编辑</el-button>
          <el-button v-if="!node.childNodes || !node.childNodes.length" type="text" size="mini"
            @click="() => remove(node, data)">删除</el-button>
        </span>
      </span>
    </el-tree>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './interest-add-or-update'

export default {
  data() {
    return {
      parentId: [],
      updateNodes: [],
      addOrUpdateVisible: false,
      dataList: [],
      expandedKey: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
  },
  //方法集合
  methods: {
    getDataList() {
      this.$http({
        url: this.$http.adornUrl("/admin/interest/list"),
        method: "get",
      }).then(({ data }) => {
        this.dataList = data.data
      })
    },
    append(data) {
      // 创建数据对象的副本，而不是直接修改原始对象
      const newData = {
        ...data,
        parentId: data.interestId,
        interestId: null
      }
      this.addOrUpdateHandle(newData)
    },
    edit(data) {
      this.addOrUpdateHandle(data)
    },
    // 新增 / 修改
    addOrUpdateHandle(data) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(data)
      })
    },
    batchDelete() {
      let interestIds = []
      let checkedNodes = this.$refs.menuTree.getCheckedNodes()
      for (let i = 0; i < checkedNodes.length; i++) {
        interestIds.push(checkedNodes[i].interestId)
      }
      this.$confirm(`是否批量删除【${interestIds}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/admin/interest/delete"),
            method: "post",
            data: this.$http.adornData(interestIds, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单批量删除成功",
              type: "success",
            })
            this.getDataList()
          })
        })
        .catch(() => { })
    },
    remove(node, data) {
      var ids = [data.interestId];
      this.$confirm(`是否删除【${data.name}】菜单?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/admin/interest/delete"),
            method: "delete",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            this.$message({
              message: "菜单删除成功",
              type: "success",
            })
            //刷新出新的菜单
            this.getDataList()
            //设置需要默认展开的菜单
            this.expandedKey = [node.parent.data.parentId]
          });
        })
        .catch(() => { })
    },
  }
};
</script>
<style scoped></style>
